<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style>
      .box {
         position: relative;
         width: 300px;
         height: 300px;
         margin: 100px auto;
         /* transition: all 1s; */
         transform-style: preserve-3d;
      }
      .box:hover{
         animation: o 4s linear infinite ;
      }
      .box1 {
         position: absolute;
         width: 100%;
         height: 100%;
         background-color: green;
         z-index: 1;
         border-radius: 50%;
         font-size: 40px;
         color: antiquewhite;
         text-align: center;
         line-height: 300px;
      }

      .box2 {
         position: absolute;
         width: 100%;
         height: 100%;
         background-color: greenyellow;
         border-radius: 50%;
         border-radius: 50%;
         font-size: 40px;
         color: antiquewhite;
         text-align: center;
         line-height: 300px;
         transform: rotatey(180deg);
      }
      @keyframes o {
         0%{
            transform: rotateY(0deg);
         }
         50%{
            transform: rotateY(180deg);
         }
         100%{
            transform: rotateY(360deg);
         }
      }
   </style>
</head>

<body>
   <div class="box">
      <div class="box1">性感程序员</div>
      <div class="box2">在线找BUG</div>
   </div>
</body>

</html>